<template>
  <div id="app">
    <!-- 路由占位符 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <!-- 底部导航栏 -->
    <van-tabbar
      v-model="active"
      @change="changePath"
      active-color="#F96C2F"
      inactive-color="#A6A5A5"
    >
      <van-tabbar-item
        v-for="item in indexTabBar"
        :key="item.id"
        :icon="item.icon"
      >{{item.authName}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
</style>
<script>
// import { mapState, mapActions } from 'vuex'
import { Tabbar } from '@/api/api.js'
export default {
  data () {
    return {
      // 切换路由
      active: 0,
      // 导航切换
      indexTabBar: []
    }
  },
  computed: {
    // ...mapState(['indexTabBar'])
  },
  created () {
    // app启动创建本地购物车列表
    const carList = window.localStorage.getItem('carList')
      || window.localStorage.setItem('carList', JSON.stringify([]))
  },
  mounted () {
    this.getTabbar()
  },
  methods: {
    // 获取tabbar
    async getTabbar () {
      const { data: res } = await Tabbar();
      if (res.status !== 200) return
      this.indexTabBar = res.data.bar
    },
    // 跳转首页路由
    changePath () {
      this.$router.push(this.indexTabBar[this.active].path)
    }
  }
}
</script>
